<template>
  <div class="wrap">
    <img class="title-img" src="@/assets/home/per-user-title@2x.png" />
    <div class="list-box">
      <div class="item-box color_1">
        <div class="title"><span>水</span></div>
        <ul class="ul-list">
          <li>
            <span class="bg">
              <span class="spa">昨日</span>
              <span class="spb">用水量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.water.yestoday }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">日人均</span>
              <span class="spb">用水量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.water.perCapitaPerDay }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">上月</span>
              <span class="spb">用水量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.water.lastMonthWater }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">月人均</span>
              <span class="spb">用水量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.water.perCapitaPerMonth }}</span>
            </span>
          </li>
        </ul>
      </div>
      <div class="item-box color_2">
        <div class="title"><span>电</span></div>
        <ul class="ul-list">
          <li>
            <span class="bg">
              <span class="spa">昨日</span>
              <span class="spb">用电量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.electricity.yestoday }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">日人均</span>
              <span class="spb">用电量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.electricity.perCapitaPerDay }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">上月</span>
              <span class="spb">用电量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.electricity.lastMonthWater }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">月人均</span>
              <span class="spb">用电量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.electricity.perCapitaPerMonth }}</span>
            </span>
          </li>
        </ul>
      </div>
      <div class="item-box color_3">
        <div class="title"><span>标煤</span></div>
        <ul class="ul-list">
          <li>
            <span class="bg">
              <span class="spa">昨日</span>
              <span class="spb">用标煤量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.standardCoal.yestoday }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">日人均</span>
              <span class="spb">用标煤量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.standardCoal.perCapitaPerDay }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">上月</span>
              <span class="spb">用标煤量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.standardCoal.lastMonthWater }}</span>
            </span>
          </li>
          <li>
            <span class="bg">
              <span class="spa">月人均</span>
              <span class="spb">用标煤量</span>  
            </span>
            <span class="number">
              <span class="line"></span>
              <span class="num">{{ perCapitaEnergyConsumption.standardCoal.perCapitaPerMonth }}</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useHomeStore } from '@/Store/homeStore';
import { toRefs } from 'vue';


const homeStore = useHomeStore();

const { perCapitaEnergyConsumption } = toRefs(homeStore);

</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  background: linear-gradient(90deg, rgba(33, 100, 156, 0.5) 0%, rgba(29, 70, 143, 0.25) 100%);
  border: 1px solid rgba(35, 135, 217, 1);
  overflow: hidden;
  border-radius: 11px;
  margin-top: 8px;
  .title-img {
    width: 178px;
    height: 34px;
    margin: 11px auto 10px 42px;
  }
  .list-box{
    width: 476px;
    margin: 0 auto;
    margin-bottom: 21px;
  }
  
    .item-box{
      width: 476px;
      height: 108px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, 0.16);
      border: 1px solid rgba(33, 116, 188, 1);
      display: flex;
      justify-content: space-between;
      > .title {
        width: 24px;
        height: 72px;
        opacity: 1;
        border-radius: 9.5px;
        background: linear-gradient(180deg, rgba(67, 207, 124, 1) 0%, rgba(67, 207, 124, 0) 100%);
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 11px;
        span {
          display: block;
          margin: 0 auto;
          font-size: 18px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 23.87px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;
          margin-top: 31px;
        }
      }
      ul.ul-list{
        padding-top: 8px;
        padding-bottom: 7px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 206px;
          height: 39px;
          box-sizing: border-box;
          border-radius: 10px;
          position: relative;
          span {
            position: relative;
            z-index: 1;
          }
          span.bg {
            width: 110px;
            height: 39px;
            box-sizing: border-box;
            border-radius: 10px;
            background: linear-gradient(90deg, rgba(42, 255, 255, 0.58) 0%, rgba(42, 255, 255, 0) 100%);
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .spa {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 21.22px;
            color: rgba(255, 235, 59, 1);
            text-align: left;
            vertical-align: top;
            text-indent: 12px;
            margin-right: 5px;
            white-space: nowrap;
          }
          .spb{
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 21.22px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
            vertical-align: top;
            white-space: nowrap;
          }
          .number {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: relative;
            background: url("@/assets/home/bg-line.png") right top no-repeat;
            background-size: 100% 100%;
            width: 146px;
            height: 39px;
            position: absolute;
            right: 0;
            top: 0;
            box-sizing: border-box;
          }
          .line{
            width: 1.5px;
            height: 21px;
            background-color: rgba(36, 149, 150, 1);
            justify-self: flex-end;
            margin-right: 10px;
            margin-left: 11px;
          }
          .num{
            font-size: 22px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 31.86px;
            color: rgba(0, 251, 255, 1);
            text-align: left;
            vertical-align: top;
            margin-right: 10px;
          }
        }
        li:nth-child(1), li:nth-child(3) {
          margin-right: 10px;
        }
        li:nth-child(1), li:nth-child(2) {
          margin-bottom: 15px;
        }
      }
    }
  
}

.color_1{
  border-bottom: 0px !important;
    > .title {
      span {
        margin-top: 31px !important;
      }
    }
}

.color_2{
  border-bottom: 0px !important;
    > .title {
      background: linear-gradient(180deg, rgba(42, 130, 228, 1) 0%, rgba(0, 186, 173, 0) 100%) !important;
      span {
        margin-top: 32px !important;
      }
    }
    .bg {
      background: linear-gradient(90deg, rgba(0, 78, 255, 0.5) 0%, rgba(42, 255, 255, 0) 100%) !important;
    }
}

.color_3{
    > .title {
      background: linear-gradient(180deg, rgba(255, 195, 0, 1) 0%, rgba(255, 235, 59, 0) 100%) !important;
      span {
        margin-top: 22px !important;
      }
    }
    .bg {
      background: linear-gradient(90deg, rgba(255, 235, 59, 0.5) 0%, rgba(234, 255, 0, 0) 100%) !important;
    }
}

</style>